<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Column Hider Extension</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../../dojo/resources/dojo.css";
			@import "../../css/skins/claro.css";
			.dgrid {
				width: 750px;
				margin: 10px;
			}
			.field-col1 {
				width: 100px;
			}
			.field-col2 {
				width: 100px;
			}
			.field-col3 {
				width: auto;
			}
			.field-col4 {
				width: 100px;
			}
			.field-col5 {
				width: 150px;
			}
		</style>
		<script src="../../../dojo/dojo.js"
			data-dojo-config="async: true"></script>
		<script>
			// Functions defined within require callback
			var getColumns, getAltColumns, createGrid, destroyGrid;
			
			require(["dojo/_base/lang", "dojo/_base/declare",
				"dgrid/OnDemandGrid", "dgrid/Selection",
				"dgrid/extensions/ColumnHider", "dgrid/extensions/ColumnResizer", "dgrid/extensions/ColumnReorder",
				"put-selector/put", "dgrid/test/data/base", "dojo/domReady!"],
			function(lang, declare, Grid, Selection, ColumnHider, ColumnResizer, ColumnReorder, put, testStore){
				var columns = {
						col1: "Column 1Column1Column 1 Column 1",
						col2: { label: "Column2 (unhidable)", sortable: false, unhidable: true },
						col3: {
							label: "Column3 (initially hidden)",
							hidden: true
						},
						col4: "Column 4",
						col5: "Column 5"
					},
					altColumns = [
						{ field: "col2", label: "Col2" },
						// test setting unhidable *and* hidden (i.e. not in menu, not displayed)
						{ field: "col4", label: "Col4", sortable: false, hidden: true, unhidable: true },
						{ field: "col1", label: "Col1" },
						{ field: "col5" } // no label, to test fallback to field
					],
					grid,
					gridResize,
					gridReorder;
				
				getColumns = function(){
					return lang.clone(columns);
				};
				
				getAltColumns = function(){
					return lang.clone(altColumns);
				};
				
				createGrid = function(){
					if(grid){
						var next = grid.domNode.nextSibling;
						grid.destroy();
						document.body.insertBefore(put("div#grid"), next);
					}
					grid = window.grid = new (declare([Grid, Selection, ColumnHider]))({
						store: testStore,
						columns: getColumns()
					}, "grid");
					
					grid.on("dgrid-columnstatechange", function(evt){
						console.log("Column for field " + evt.column.field + " is now " +
							(evt.hidden ? "hidden" : "shown"));
					});
				};
				
				createGrid();
				
				gridResize = window.gridResize = new (declare([Grid, Selection, ColumnHider, ColumnResizer]))({
					store: testStore,
					columns: lang.clone(columns)
				}, "gridresize");
				gridReorder = window.gridReorder = new (declare([Grid, Selection, ColumnReorder, ColumnHider]))({
					store: testStore,
					columns: lang.clone(columns)
				}, "gridreorder");
			});
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with the column hider plugin</h2>
		<div id="grid"></div>
		<div>Buttons to test changing column structure and recreating grid:
			<button onclick="grid.set('columns', getColumns());">Original Structure</button>
			<button onclick="grid.set('columns', getAltColumns());">New Structure</button>
			<button onclick="createGrid();">Recreate Grid</button>
		</div>
		<h2>Another grid w/ ColumnHider and ColumnResizer</h2>
		<div id="gridresize"></div>
		<h2>Another grid w/ ColumnHider and ColumnReorder</h2>
		<div id="gridreorder"></div>
	</body>
</html>
